<!-- 页面 -->
<template>
  <s-layout navbar="custom">
    <view class="vasp_box" style="background-color: #ffffff;">
      <image src="/static/images/queren.png"
             mode="aspectFit"
             style="width: 60%; display: none; margin: 0 auto;">
      </image>
      <uni-title
        type="h2"
        align="center"
        title="确认信息">
      </uni-title>
      <uni-card>
        <text>您的增值服务贴ID号码为{{state.vasp_data.isbn}}，
          {{state.vasp_data.child.length > 0?'请选择兑换的增值包:':'该码已失效或没有可兑换的增值包'}}
        </text>
      </uni-card>
      <radio-group>
        <view
          v-if="state.vasp_data.child.filter(item => item.pcateid === 239).length > 0"
        >一级造价工程师：</view>
        <view class="uni-list"
              v-if="state.vasp_data.child.filter(item => item.pcateid === 239).length > 0"
        >

          <view
            v-for="item in state.vasp_data.child.filter(item => item.pcateid === 239)"
            :key="item.id"
          >
            <uni-card
              v-if="checkisbn(item.oldid) === true"
              class="card-dh uni-list-cell uni-list-cell-pd" >

              <view class="f-radio">
                <radio name="erji" @tap="clickvasp(item.id)" :value="item.id" activeBackgroundColor="#e3a248" activeBorderColor="#e3a248" border-color="#e3a248" />
              </view>
              <view class="f-text">{{item.title}}</view>

            </uni-card>
          </view>

        </view>

        <view
          v-if="state.vasp_data.child.filter(item => item.pcateid === 240).length > 0"
        >二级造价工程师：</view>
        <view class="uni-list"
              v-if="state.vasp_data.child.filter(item => item.pcateid === 240).length > 0"
        >

          <view
            v-for="item in state.vasp_data.child.filter(item => item.pcateid === 240)"
            :key="item.id"
          >
            <uni-card
              v-if="checkisbn(item.oldid) === true"
              class="card-dh uni-list-cell uni-list-cell-pd" >

              <view class="f-radio">
                <radio name="erji" @tap="clickvasp(item.id)" :value="item.id" activeBackgroundColor="#e3a248" activeBorderColor="#e3a248" border-color="#e3a248" />
              </view>
              <view class="f-text">{{item.title}}</view>

            </uni-card>
          </view>


        </view>


        <view
          v-if="state.vasp_data.child.filter(item => item.pcateid === 241).length > 0"
        >注册消防工程师：</view>
        <view class="uni-list" v-if="state.vasp_data.child.filter(item => item.pcateid === 241).length > 0">

          <view
            v-for="item in state.vasp_data.child.filter(item => item.pcateid === 241)"
            :key="item.id"
          >
            <uni-card
              v-if="checkisbn(item.oldid) === true"
              class="card-dh uni-list-cell uni-list-cell-pd" >

              <view class="f-radio">
                <radio name="erji" @tap="clickvasp(item.id)" :value="item.id" activeBackgroundColor="#e3a248" activeBorderColor="#e3a248" border-color="#e3a248" />
              </view>
              <view class="f-text">{{item.title}}</view>

            </uni-card>
          </view>

        </view>

        <view
          v-if="state.vasp_data.child.filter(item => ![239,240,241].includes(item.pcateid)).length > 0"
        >其他：</view>
        <view class="uni-list" v-if="state.vasp_data.child.filter(item => ![239,240,241].includes(item.pcateid)).length > 0">


          <view
            v-for="item in state.vasp_data.child.filter(item => ![239,240,241].includes(item.pcateid))"
            :key="item.id"
          >
            <uni-card
              v-if="checkisbn(item.oldid) === true"
              class="card-dh uni-list-cell uni-list-cell-pd" >

              <view class="f-radio">
                <radio name="erji" @tap="clickvasp(item.id)" :value="item.id" activeBackgroundColor="#e3a248" activeBorderColor="#e3a248" border-color="#e3a248" />
              </view>
              <view class="f-text">{{item.title}}</view>
            </uni-card>
          </view>


        </view>

      </radio-group>

      <view class="vasp_box" style="margin-top: 30px; padding: 10px 20px; color: #ff0000;">
        <text>
          提示:每个兑换码仅能兑换一次，一旦兑换不能修改，请谨慎选择。
        </text>
      </view>
      <view class="duihuan-success d-flex flex-row flex-grow-0 justify-content-evenly">
        <button class="btn-back" type="primary" @click="save_zengzhibao()" :disabled="state.vasp_data.child.length>0?false:true">确认兑换</button>
        <button class="btn-dh" type="primary" @click="navigateTo('/pages/index/user?path=duihuan')">暂不兑换</button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import {
    computed,
    reactive
  } from 'vue';
  import {
    onLoad,
    onReachBottom,
    onPullDownRefresh
  } from '@dcloudio/uni-app';
  import {
    formatOrderColor
  } from '@/sheep/hooks/useGoods';
  import sheep from '@/sheep';
  import _ from 'lodash';
  import {
    isEmpty
  } from 'lodash';
  import HMfilterDropdown from '@/sheep/components/HM-filterDropdown/HM-filterDropdown.vue';
  import { mobile } from '@/sheep/validate/form';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);


  // 数据
  const state = reactive({
    loadStatus: '',
    vasp_data:{
      'isbn':'',
      'child':[],

    },

  });

  function clickvasp(id){
    state.vasp_data.RelationId_tmp = id;
  }

  /* 获取sn的详细信息 */
  function get_zengzhibao(sn){
    //sheep.$helper.toast('增值包加载中…');
    sheep.$api.dhzengzhi.get_zengzhibao(sn).then((res)=>{
      if(res.code === 1){
        state.vasp_data = res.data;
        console.log(state.vasp_data);
      }else{
        navigateTo("/pages/vasp/toerror");
      }

      /*console.log(state.vasp_data.child);*/
/*      //获取用户已经兑换的增值包
      sheep.$api.dhzengzhi.get_my_zengzhibaocon().then((res) => {
        state.user_vasp_data = res.data;
        //对当前的用户已经兑换的增值包获取后，进行比对
        let newArray = state.vasp_data.child.filter(item1 =>
          !state.user_vasp_data.some(item2 => item2.ordertitle === item1.title)
        );
        state.vasp_data.child = newArray;
      });*/
      /*if(state.vasp_data.child == null){
        navigateTo("/pages/vasp/toerror");
        state.vasp_data.child = [];
      }*/
    });
  }

  function checkisbn(oldid){
    //alert(oldid)
    let ss = parseInt(state.vasp_data.isbn.split('&')[0].substr(24)) >  parseInt('18379325') && parseInt(state.vasp_data.isbn.split('&')[0].substr(24)) <=  parseInt('18397704')
    let hidearr = [376,377,378,379,380,381,382];
    if(oldid == ''){
      return true
    }else{
      if(!ss){
        //console.log(hidearr.includes(parseInt(oldid)))
        if(hidearr.includes(parseInt(oldid))){
          return false;
        }
      }
      return true;
    }

  }


  /* 保存详细信息 */
  function save_zengzhibao() {
    //检查当前sn码时需要检查用户是否绑定后记号
    sheep.$store('user').getInfo()
      .then((res) => {
        //if (1) {
        if (res.mobile) {
          ///如果手机号为真
          state.vasp_data.RelationId = state.vasp_data.RelationId_tmp;
          state.vasp_data.child = '';
          sheep.$api.dhzengzhi.save_zengzhibao(state.vasp_data).then((res) => {
            if (res.data.sqldata == 1) {
              //sheep.$helper.toast(res.msg);
              sheep.$router.go("/pages/vasp/tosuccess", { code_img_url: res.data.code_img_url });
            } else {
              sheep.$router.go("/pages/vasp/toerror", { code_img_url: res.data.code_img_url });
              //sheep.$helper.toast(res.msg);
            }
          });


        } else {
          //没有绑定手机号
          sheep.$store('modal').$patch((state) => {
            state.auth = '';
            setTimeout(() => {
              showAuthModal('changeMobile');
            }, 100);
          });


        }
      });
  }

  function navigateTo(path) {
    sheep.$router.go(path);
  }


  /*
  * 判断SN是否可用
  * */
  function  checkused(sn){
    sheep.$api.dhzengzhi.checkisbn({
      'sn': sn
    }).then((res) => {
      //console.log("----------------"+res.code);
      if (res.code !== 1) {
        //返回以后判断是否已经被兑换
        sheep.$router.go("/pages/vasp/toerror");
        //sheep.$helper.toast(res.msg);

      }else{
        get_zengzhibao(sn);
      }
    });

  }

  onLoad((options) => {
    checkused(options.sn);
    //get_zengzhibao(options.sn);
  });
</script>

<style lang="scss" scoped>
  .duihuan-success{
    margin-top: 50px;
  }
  .uni-list-cell{
    border-radius: 20px;
    padding: 20px 0;
    border-color: #e3a248;
  }
  .uni-list-cell{
    view{
      float: left;
      line-height: 64rpx;

    }
  }
  .uni-list-cell{
    .f-radio{
      width: 40px;
      border-color: #e3a248;

    }
    .f-text{
      width: 80%;
    }
    .f-text:after{
      content: '';
      display: block;
      clear: both;
      margin-bottom: 10px;
    }
  }

  .btn-back{
    background: #e9b665;
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 4px 20px;
    font-size: 16px;
    line-height: 28px;
  }
  .btn-dh{
    background: #ff5160;
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 4px 20px;
    font-size: 16px;
    line-height: 28px;
  }
  .page-tiele-kc{
    text-align: center;
    line-height: 48rpx;
    font-size: 38rpx;
    font-weight:bold;
  }
  .uni-common-mt{
    margin-top: 15px
  }
  .uni-padding-wrap{
    padding: 0 15px;
  }
  .vasp_box{
    margin: 0 15px;
  }
  .vasp_title{
    background-color: #da913c;
    font-size: 38rpx;
    line-height: 62rpx;
    color: #ffffff;
    padding: 20px;
    font-weight: bold;
    border-radius: 7px 7px 0 0;
  }
  .vasp_con{
    background-color: #fffbf1;
    color: #753c12;
    text-align:center;
    line-height: 58rpx;
    font-size: 30rpx;
    padding: 20px;
    border-radius: 0 0 7px 7px;
  }

  .buy-box {
    position: absolute;
    bottom: 0rpx;
    right: 20rpx;
    z-index: 2;
    width: 120rpx;
    height: 50rpx;
    background: linear-gradient(90deg, #fe8900, #ff5e00);
    border-radius: 25rpx;
    font-size: 24rpx;
    color: #ffffff;
  }

  .price-unit {
    margin-right: -4px;
    color: red;
    font-size: 36rpx;
  }

  .ss-order-card-warp {
    padding: 20rpx;

    .img-box {
      width: 184rpx;
      height: auto;
      border-radius: 10rpx;
      overflow: hidden;

      .order-img {
        width: 184rpx;
        height: auto;
      }
    }

    .box-right {
      flex: 1;
      position: relative;
    }

    .title-text {
      font-size: 30rpx;
      font-weight: 500;
      line-height: 40rpx;
    }
  }

  :deep(.uni-tooltip-popup) {
    background: var(--ui-BG);
  }

  .warning-color {
    color: #faad14;
  }

  .danger-color {
    color: #ff3000;
  }

  .success-color {
    color: #52c41a;
  }

  .info-color {
    color: #999999;
  }
</style>